<template>
  <div class="app-container app-container-full default-bg-color">
    <user-grid ref="userGrid" :exColumns="exColumns">
      <template #tbar>
        <el-button type="success" @click="onAdd()">
          <i-ep-plus />
          新增
        </el-button>
        <el-button type="danger" @click="handleDelete()">
          <i-ep-delete />
          删除
        </el-button>
      </template>
      <template #column_oper_render="{ row }">
        <el-button v-hasPerm="['sys:user:reset_pwd']" type="primary" size="small" link @click="resetPwd(row)">
          <i-ep-refresh-left />
          重置密码
        </el-button>
        <el-button v-hasPerm="['sys:user:edit']" type="primary" link size="small" @click="onEdit(row.id)">
          <i-ep-edit />
          编辑
        </el-button>
        <el-button v-hasPerm="['sys:user:delete']" type="primary" link size="small" @click="handleDelete(row.id)">
          <i-ep-delete />
          删除
        </el-button>
      </template>
    </user-grid>
    <!-- 弹窗 -->
    <el-dialog v-model="dialog.visible" :title="dialog.title" width="500px" append-to-body @opened="onOpenDialog" @close="closeDialog">
      <user-form ref="userForm" :id="userId" />
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleSubmit">保 存</el-button>
          <el-button @click="dialog.visible = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
  import UserGrid from './user-grid.vue';
  import UserForm from './user-form.vue';
  import { deleteUsers, resetPassword } from '@/api/user/index';

  const dialog = reactive({
    title: '用户信息',
    visible: false,
  });
  const userId = ref('');

  const exColumns = [{ field: 'oper', title: '操作', slots: { default: 'column_oper_render' } }];

  const userGrid = ref(UserGrid);
  const userForm = ref(UserForm);

  function onAdd() {
    let deptData = userGrid.value.getCurrentTreeNode();
    if (!deptData || !deptData.id) {
      ElMessage.warning('请选择部门');
      return;
    }

    dialog.visible = true;
  }

  function onOpenDialog() {
    if (dialog.type === 'add') {
      let userData = {
        id: '',
        deptId: deptData.id,
      };
      userForm.value.setValue(userData);
    }
  }

  function onEdit(id) {
    userId.value = id;
    dialog.visible = true;
  }

  function handleDelete(id) {
    let ids = [];
    if (!id) {
      let selects = userGrid.value.userGrid.getCheckboxRecords();
      if (!selects) {
        ElMessage.warning('请选择要删除的数据');
        return;
      }
      for (const item of selects) {
        ids.push(item.id);
      }
    } else {
      ids.push(id);
    }

    deleteUsers(ids, true).then(() => {
      ElMessage.success('删除成功');
      userGrid.value.reload();
    });
  }

  function resetPwd(row) {
    resetPassword(row.id, true).then(() => {
      ElMessage.success('重置成功');
    });
  }

  function handleSubmit() {
    userForm.value.save();
  }

  function closeDialog() {
    userGrid.value.reload();
  }
</script>
<style lang=""></style>
